.koo-btn {
  position: relative;
  display: flex;
  gap: 0.25rem;
  text-align: center;
  align-items: center;
  vertical-align: middle;
  background-color: transparent;
  background-image: none;
  border-radius: 0.25em;

  &:hover {
    cursor: pointer;
  }

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    background-color: gray;
    color: var(--koo-btn-disable);
    box-shadow: none;
    border: solid 1px var(--koo-btn-disable);
    opacity: 10.7%;

    > * {
      pointer-events: none;
    }

    &:hover {
      border: solid 1px var(--koo-btn-disable);
      background-color: gray;
      color: var(--koo-btn-disable);
    }
  }

  &.koo-danger {
    color: var(--koo-btn-danger-unselected);

    &:hover {
      background-color: var(--koo-btn-danger-selected);
    }
  }
}

.koo-btn-primary {
  background-color: var(--koo-main-color);
  color: white;
  border: none;

  &:hover {
    background-color: var(--koo-blue-5);
  }

  &.koo-danger {
    background-color: var(--koo-btn-danger-unselected);
    color: white;
  }
}

.koo-btn-link {
  color: var(--koo-blue-5);
  border: none;

  &:hover {
    color: var(--koo-blue-4);
  }

  &.koo-danger {
    &:hover {
      background-color: transparent;
      color: var(--koo-btn-danger-selected);
    }
  }

  &.disabled,
  &[disabled] {
    background-color: transparent;
    border: none;
    color: var(--koo-btn-disable);

    &:hover {
      border: none;
      background-color: transparent;
    }
  }
}

.koo-btn-dashed {
  border: dashed 1px #d9d7d7;
  color: black;

  &:hover {
    border: dashed 1px lightblue;
    color: lightblue;
  }

  &.disabled,
  &[disabled] {
    border: dashed 1px var(--koo-btn-disable);

    &:hover {
      border: dashed 1px var(--koo-btn-disable);
    }
  }

  &.koo-danger {
    border: dashed 1px var(--koo-btn-danger-unselected);

    &:hover {
      background-color: transparent;
      border: dashed 1px var(--koo-btn-danger-selected);
      color: var(--koo-btn-danger-selected);
    }
  }
}

.koo-btn-default {
  border: solid 1px #d9d7d7;
  color: black;

  &:hover {
    border: solid 1px lightblue;
    color: lightblue;
  }

  &.koo-danger {
    border: solid 1px var(--koo-btn-danger-unselected);

    &:hover {
      background-color: transparent;
      color: var(--koo-btn-danger-selected);
      border: solid 1px var(--koo-btn-danger-selected);
    }
  }
}

.koo-btn-text {
  border: none;
  color: black;

  &:hover {
    background-color: #c7c5c5;
  }

  &.disabled,
  &[disabled] {
    background-color: transparent;
    border: none;
    color: var(--koo-btn-disable);

    &:hover {
      border: none;
      background-color: transparent;
    }
  }

  &.koo-danger {
    &:hover {
      background-color: #fff2f0;
      color: var(--koo-btn-danger-selected);
    }
  }
}

.koo-btn-ghost {
  background-color: transparent;
  color: white;
  border: solid 1px white;

  &:hover {
    background-color: transparent;
    border: solid 1px var(--koo-blue-4);
    color: var(--koo-blue-4);
  }

  &.disabled,
  &[disabled] {
    background-color: transparent;
    color: #d9d9d9;
    border: solid 1px #d9d9d9;

    &:hover {
      background-color: transparent;
      color: #d9d9d9;
      border: solid 1px #d9d9d9;
    }
  }

  &.koo-danger {
    color: transparent;
    border: transparent;

    &:hover {
      color: var(--koo-btn-danger-selected);
      border: solid 1px var(--koo-btn-danger-selected);
      background-color: transparent;
    }
  }
}

.koo-btn-large {
  font-size: var(--koo-font-xl);
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
}

.koo-btn-middle {
  font-size: var(--koo-font-base);
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
}

.koo-btn-small {
  font-size: var(--koo-font-sm);
  padding: 0.25rem 0.5rem;
  border-radius: 0.2rem;
}

.koo-btn-shape-default {
  border-radius: 0.25em;
}

.koo-btn-shape-circle {
  border-radius: 100%;
}

.koo-btn-shape-round {
  border-radius: 1rem;
}

.koo-btn-icon-small {
  font-size: 0.2rem;
}
